<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/12/5
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改密码</title>
    <!-- 引入样式和 js -->
    <jsp:include page="../../common/css_js.jsp"/>
</head>
<body>
<!-- 表单 -->
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form method="post" action="#" class="site-form">
                        <div class="form-group">
                            <label for="old-password">旧密码</label>
                            <input type="password" class="form-control" name="oldPwd" id="old-password"
                                   placeholder="输入账号的原登录密码">
                        </div>
                        <div class="form-group">
                            <label for="new-password">新密码</label>
                            <input type="password" class="form-control" name="newPwd" id="new-password"
                                   placeholder="输入新的密码">
                        </div>
                        <div class="form-group">
                            <label for="confirm-password">确认新密码</label>
                            <input type="password" class="form-control" name="confirmPwd" id="confirm-password"
                                   placeholder="再次输入新的密码">
                        </div>
                        <button type="button" id="updPwd" class="btn btn-primary"><span
                                class="mdi mdi-checkbox-marked-outline"></span>修改密码
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框 -->
<div id="aaa">
    <div class="modal fade bd-example-modal-sm" id="myModal" data-backdrop="static" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm" id="outModal" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalCenterTitle">系统提示</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <span class="text-danger">您的密码已被修改，请重新登录！</span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="ok">确认</button>
                    <button type="button" class="btn btn-secondary" id="no" data-dismiss="modal">(<span id="se">5</span>秒后自动)取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        // 回车触发事件
        document.onkeydown = function (e) {
            let theEvent = window.event || e;
            let keyCode = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (keyCode === 13) {
                updPwd();
            }
        }

        // 修改密码单击事件
        $("#updPwd").click(function () {
            updPwd();
        });
    });


    let b = true;

    function updPwd() {
        // 判断
        if ($("#old-password").val() === '') {
            notify("mdi mdi-close", "旧密码不能为空！", "danger");
        } else if ($("#new-password").val() === '') {
            notify("mdi mdi-close", "新密码不能为空！", "danger");
        } else if ($("#new-password").val() === $("#old-password").val()) {
            notify("mdi mdi-close", "新密码不能与旧密码相同！", "danger");
        } else if ($("#confirm-password").val() === '') {
            notify("mdi mdi-close", "确认密码不能为空！", "danger");
        } else if ($("#new-password").val() !== $("#confirm-password").val()) {
            notify("mdi mdi-close", "两次输入密码不一致！", "danger");
        } else {
            $.confirm({
                title: '修改密码',
                content: '你确定要修改密码吗？',
                type: 'red',
                icon: 'mdi mdi-pencil',
                typeAnimated: true,
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'btn-red',
                        action: function () {
                            obj = {"newPwd": $("#new-password").val(), "oldPwd": $("#old-password").val()};
                            $.post("${ctx}/user/update-password", obj, function (data) {
                                if (data.code === 200) {
                                    let loader = $('body').lyearloading({
                                        opacity: 0.2,
                                        spinnerSize: 'lg'
                                    });
                                    setTimeout(function () {
                                        loader.destroy();
                                        notify("mdi mdi-checkbox-marked-circle-outline", "密码修改成功!", "success");
                                    }, 1e3);
                                    $("form")[0].reset(); // 清空表单
                                    setTimeout(function () {
                                        // 获取最顶层的页面
                                        let topBody = $(top.document.body);
                                        // 将模态框的代码添加到顶层页面里面
                                        topBody.append($("#aaa").html());
                                        // 从顶层页面里面打开模态框
                                        window.top.$("#myModal").modal();
                                        // 启动定时器
                                        myInterval2();
                                        // 确定和取消单击事件
                                        window.top.$("#ok,#no").click(function () {
                                            // 关闭模态框
                                            window.top.$("#myModal").modal("hide");
                                            // 加载中使用文字和颜色
                                            let l = $('body').lyearloading({
                                                opacity: 0.125,
                                                spinnerSize: 'lg',
                                                spinnerText: '正在退出中，.请稍后..',
                                                textColorClass: 'text-danger'
                                            });
                                            setTimeout(function () {
                                                l.destroy();
                                                window.parent.location.href = "${ctx}/logout";
                                            }, 3e3);
                                        });
                                    }, 3000);
                                } else {
                                    let loader = $('body').lyearloading({
                                        opacity: 0.2,
                                        spinnerSize: 'lg'
                                    });
                                    setTimeout(function () {
                                        loader.destroy();
                                        notify("mdi mdi-close", data.message, "danger");
                                    }, 1e3);
                                }
                            });
                        }
                    },
                    cancel: {   // 取消按钮
                        text: '取消',
                        action: function () {
                        }
                    }
                }
            });
        }
    }

    // 模态框定时器
    let interval2;

    function myInterval2() {
        // 设置定时器，每隔1秒，执行一次changeSecond()方法
        interval2 = window.setInterval(function () {
            // 得到需要改变的时间
            let second = window.top.$("#se").text();
            // 每隔执行一次减 1
            second = second - 1;
            // 当时间为 0 时清除定时器
            if (second === 0) {
                // 清除定时器
                window.clearInterval(interval2);
                // 关闭模态框
                window.top.$("#myModal").modal("hide");
                // 跳转到登录页面
                let l = $('body').lyearloading({
                    opacity: 0.125,
                    spinnerSize: 'lg',
                    spinnerText: '正在退出中，.请稍后..',
                    textColorClass: 'text-danger'
                });
                setTimeout(function () {
                    l.destroy();
                    window.parent.location.href = "${ctx}/logout";
                }, 1e3);

                return;
            }
            // 改变的值
            window.top.$("#se").text(second);
        }, 1000);
    }
</script>
</body>
</html>
